<template>
  <v-menu>
    <template #activator="{ props }">
      <div class="color-picker" v-bind="props"></div>
    </template>
    <template #default="{ isActive }">
      <v-color-picker v-if="isActive" hide-inputs show-swatches v-model:model-value="modelValue"></v-color-picker>
    </template>
  </v-menu>
</template>
<script setup>
import { useModel } from "vue";

const props = defineProps({
  modelValue: { type: String, default: "#000000" },
});
const emit = defineEmits(["update:modelValue"]);
const modelValue = useModel(props, "modelValue", emit);
</script>
<style scoped lang="scss">
.color-picker {
  width: 38px;
  height: 26px;
  background-color: v-bind(modelValue);
}
</style>
